import { message } from 'antd';
import React, { useEffect } from 'react';
import { useLocation, useNavigate, useRoutes } from 'react-router-dom';
import routes from './router';
function ToPage1() {
  const navigate = useNavigate();
  // 加载完组件之后实现跳转
  useEffect(() => {
    // 加载完成组件之后执行这里的代码
    navigate('/page1');
    message.warning('您还没有登录,请登录后再访问')
  }, []);

  return <div></div>;
};

function ToLogin() {
  const navigate = useNavigate();
  // 加载完组件之后实现跳转
  useEffect(() => {
    // 加载完成组件之后执行这里的代码
    navigate('/login');
    message.warning('您已经登录过了')
  }, [])

  return <div></div>

}

// 手写封装路由守卫
function BeforeRouterEnter() {
  const outlet = useRoutes(routes);
  /**
   * 后台管理系统两种经典的跳转情况
   * 1.如果访问的是登录页面,并且有 token,跳转到首页
   * 2.如果访问的不是登录页,并且没有token,跳转到登录页
   * 3.其余的都可以正常放行
   */
  const location = useLocation();
  const token = localStorage.getItem('lege-react-management-token');
  // 1.如果访问的是登录页面,并且有 token,跳转到首页
  if (location.pathname === '/login' && token) {
    // 这里不能直接使用useNavigator 来实现跳转, 因为需要BeforeRouterEnter 是一个正常的JSX组件
    return <ToPage1 />
  }

  // 2.如果访问的不是登录页,并且没有token,跳转到登录页
  if (location.pathname !== '/login' && !token) {
    // 这里不能直接使用useNavigator 来实现跳转, 因为需要BeforeRouterEnter 是一个正常的JSX组件
    return <ToLogin />
  }
  return outlet;

}

function App() {
  const outlet = useRoutes(routes)
  return (
    <div className="App">
      {/* {outlet} */}
      <BeforeRouterEnter />
    </div>
  )
}

export default App
